import React from "react";
import PropTypes from "prop-types";
import {TabBar} from "antd-mobile";
import {withRouter} from "react-router-dom";
import {connect} from "react-redux"

@connect(
  state => state.chatMsg,
  null
)
@withRouter
class TabbarLink extends React.Component {
  static defaultProps = {
    tabList: PropTypes.array.required
  };

  render () {
    const {pathname} = this.props.history.location;
    const TabbarItem = TabBar.Item;
    return (
      <TabBar>
        {
          this.props.tabList.map(v =>
            <TabbarItem
              badge={v.path === '/msg' ? this.props.unread : 0}
              key={v.title}
              icon={{uri: require(`./img/${v.icon}`)}}
              selectedIcon={{uri: require(`./img/${v.selectedIcon}`)}}
              title={v.title}
              selected={v.path === pathname}
              onPress={() => this.props.history.push(v.path)}
            >
            </TabbarItem>
          )
        }
      </TabBar>
    );
  }
}

export default TabbarLink;